:root {
    --z-theme-color: #122;
    --z-theme-light-color: #233;
    --z-dark-color: #111;
    --z-light-color: #eee;
    --z-note-color: #aaa;
    --z-active-color: #f94;
    --z-transition: all .2s ease;
    --z-index: calc(222 * 222);
    --z-blue-color: #27b;
    --z-red-color: #e57;
    --z-green-color: #286;
    --z-gray-color: #234;

    --el-border-radius-base: 0;
    --el-border-radius-small: 0;
    --el-border-radius-round: 0;
}

@font-face {
    font-family: ZZONE;
    font-display: swap;
    font-weight: normal;
    src: url('./font.woff2') format('woff2');
}

* {
    font-family: Consolas, ZZONE, Noto Mono, Noto Sans Mono, 微软雅黑, Arial, sans-serif;
    box-sizing: border-box;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw;
    height: 100vh;
    font-size: 14px;
    overflow: hidden !important;
    word-wrap: break-word;
    word-break: break-all;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: rgba(204, 204, 204, .1);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(164, 164, 164, 1);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(180, 180, 180, 1);
}

::-webkit-scrollbar-corner {
    background-color: rgba(0, 0, 0, 0);
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden !important;
    color: var(--z-dark-color);
}

.show-enter-active, .show-leave-active {
    transition: var(--z-transition);
}

.show-enter-from, .show-leave-to {
    opacity: 0 !important;
}

.shadow-font {
    /*text-shadow: -2px -2px var(--z-theme-color),
    -2px -1px var(--z-theme-color),
    -2px 0px var(--z-theme-color),
    -2px 1px var(--z-theme-color),
    -2px 2px var(--z-theme-color),
    -1px -2px var(--z-theme-color),
    -1px -1px var(--z-theme-color),
    -1px 0px var(--z-theme-color),
    -1px 1px var(--z-theme-color),
    -1px 2px var(--z-theme-color),
    0px -2px var(--z-theme-color),
    0px -1px var(--z-theme-color),
    0px 0px var(--z-theme-color),
    0px 1px var(--z-theme-color),
    0px 2px var(--z-theme-color),
    1px -2px var(--z-theme-color),
    1px -1px var(--z-theme-color),
    1px 0px var(--z-theme-color),
    1px 1px var(--z-theme-color),
    1px 2px var(--z-theme-color),
    2px -2px var(--z-theme-color),
    2px -1px var(--z-theme-color),
    2px 0px var(--z-theme-color),
    2px 1px var(--z-theme-color),
    2px 2px var(--z-theme-color);*/
    text-shadow: 1px 1px 1px var(--z-theme-color),
    -1px -1px 1px var(--z-theme-color),
    -1px 1px 1px var(--z-theme-color),
    1px -1px 1px var(--z-theme-color);
}

.el-popper,
.el-message-box,
.el-tag,
.el-notification,
.el-upload-dragger {
    border-radius: 0;
}
.el-card {
    --el-card-border-radius: 0 !important;
}
body > .el-overlay,
.el-message,
.el-notification,
.el-popper {
    z-index: var(--z-index) !important;
}
.el-alert {
    --el-alert-description-font-size: 14px;
}

.danger__input .el-input__wrapper,
.danger__input input {
    background: var(--el-color-danger-light-8);
}